<div ng-if="keyspaces === undefined || keyspaces === null" flex layout="column" layout-align="center center">
  <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  <h3>Loading...</h3>
</div>

<div ng-if="keyspaces.length == 0" flex layout="column" layout-align="center center">
  <h3>No keyspaces found.</h3>
</div>

<md-content class="md-padding">

<md-card id="{{keyspace.name}}-card" ng-repeat="keyspace in keyspaces">
   <md-toolbar>
   <div class="md-toolbar-tools">
    <h2>{{keyspace.name}}</h2>
    <span flex></span>
    <md-menu>
    <md-button class="md-icon-button" aria-label="Keyspace actions" ng-click="$mdOpenMenu()" md-menu-origin>
      <md-tooltip>Keyspace Actions</md-tooltip>
      <md-icon md-font-set="material-icons">more_vert</md-icon>
    </md-button>
    <md-menu-content>
    <md-menu-item ng-repeat="action in keyspaceActions">
      <md-button ng-click="actions.applyKeyspace($event,action,keyspace.name)">{{actions.label(action)}}</md-button>
    </md-menu-item>
    </md-menu-content>
    </md-menu>
  </div>
  </md-toolbar>

  <md-card-content ng-if="hasServingData(keyspace.name)">
    <span ng-if="keyspace.servingShards.length">
      <h3>Serving Shards</h3>
      <md-grid-list id="{{keyspace.name}}-serving-list" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="8"
          md-row-height="2:1" md-gutter="1em">
        <md-grid-tile  ng-repeat="shard in keyspace.servingShards" class="shard-tile md-whiteframe-z1">
          <a ng-href="#/shard/{{keyspace.name}}/{{shard}}" layout-fill layout="column" layout-align="center">
            <h3>{{shard}}</h3>
          </a>
        </md-grid-tile>
      </md-grid-list>
    </span>

    <span ng-if="keyspace.nonServingShards.length">
      <h3>Inactive Shards</h3>
      <md-grid-list id="{{keyspace.name}}-inactive-list" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="8"
          md-row-height="2:1" md-gutter="1em">
        <md-grid-tile ng-repeat="shard in keyspace.nonServingShards" class="shard-tile md-whiteframe-z1">
          <a ng-href="#/shard/{{keyspace.name}}/{{shard}}" layout-fill layout="column" layout-align="center">
            <h3>{{shard}}</h3>
          </a>
        </md-grid-tile>
      </md-grid-list>
    </span>
    <h3 ng-if="!keyspace.nonServingShards.length && !keyspace.servingShards.length">No Shards Found</h3>
  </md-card-content>

  <md-card-content ng-if="!hasServingData(keyspace.name)">
    <span ng-if="keyspace.nonServingShards.length">  
      <h3>Shards</h3>
      <md-grid-list id="{{keyspace.name}}-shards-list" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="8"
          md-row-height="2:1" md-gutter="1em">
        <md-grid-tile  ng-repeat="shard in keyspace.nonServingShards" class="shard-tile md-whiteframe-z1">
          <a ng-href="#/shard/{{keyspace.name}}/{{shard}}" layout-fill layout="column" layout-align="center">
            <h3>{{shard}}</h3>
          </a>
        </md-grid-tile>
      </md-grid-list>
    </span>
    
    <h3 ng-if="!keyspace.nonServingShards.length">No Shards Found</h3>
  </md-card-content>
</md-card>

</md-content>
